<template>
  <el-menu
    class="el-menu-vertical-demo"
    background-color="RGB(47,64,85)"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse="isCollapse"
    :default-active='defaultActive'
  >
    <div class="introduce">
      <img src="../../assets/logo.png" />
      <span>数藏管理系统</span>
    </div>

    <!-- 没有子菜单的 导航栏 -->
    <el-menu-item @click="checkMenu(item)" v-for="item in noChildern" :index="item.path" :key="item.id">
      <i :class="item.icon"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>

    <!-- 有子菜单的导航栏 index必须不一样，不然点开一个相同的都会点开-->
    <el-submenu v-for="item in hasChildern" :key="item.id" :index="item.id">
    <template slot="title">
      <i :class="item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </template>
    <!-- 子菜单遍历 -->
    <el-menu-item-group v-for="children in item.children" :key="children.id">
      <el-menu-item @click="checkMenu(children)" :index="children.path"><i :class="children.icon"></i>{{children.label}}</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
    
  </el-menu>
</template>


<script>
export default {
  data() {
    return {
      // isCollapse: true,
      defaultActive: this.$route.path,
      menu: [
        {
          id: "1",
          path: "/backHome/",
          name: "Index",
          label: "首页",
          icon: "el-icon-s-home",
        },
        {
          id: "2",
          label: "系统管理",
          icon: "el-icon-s-tools",
          children: [
            {
              id: "2.1",
              path: "/backHome/userMange",
              name: "UserManage",
              label: "用户管理",
              icon: "el-icon-user-solid",
            },
          ],
        },
        {
          id: "3",
          label: "商品管理",
          icon: "el-icon-s-goods",
          children: [
            {
              id: "3.1",
              path: "/backHome/goodsMange",
              name: "GoodsMange",
              label: "藏品管理",
              icon: "el-icon-goods",
            },
          ],
        },
      ],
    };
  },
  computed: {
    noChildern() {
      // 没有子菜单的计算属性
      return this.menu.filter((item) => !item.children);
    },
    hasChildern() {
      // 有子菜单的计算属性
      return this.menu.filter((item) => item.children);
    },
    isCollapse() {
      // 用的是vux的模块化引用调用 state的数据
      return this.$store.state.AsideCollapse.isCollapse;
    },
  },
  watch: {
     $route(to,from){
        // 面包屑和导航栏aside联动
        this.defaultActive=to.path
      }
  },
  methods: {
    checkMenu(item) {
      // console.log(item);
      // 使用路由名跳转
      this.$router.push({
        // name: item.name,
        path: item.path
      });
      // 使用vuex调用方法传入当前menu的数据到state
      this.$store.commit('BreadCrumbs/SelectMenu',item);
    },
  },
};
</script>

<style scoped>
/* 扩张时的宽度 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 100%;
  overflow: hidden;
}
/* 鼠标选中的样式 !important 代表优先（饿了么ui）执行*/
.el-menu-item.is-active {
  background-color: rgb(38, 52, 69) !important;
}
/* 鼠标经过导航栏悬浮的样式 */
.el-menu-item:hover {
  background-color: rgb(38, 52, 69) !important;
}

.el-submenu__title:hover {
  background-color: rgb(38, 52, 69) !important;
}

/* 选中的颜色 */
.el-menu-item.is-active{
  /* 一定要添加！important提高优先级 */
  /* 设置字体颜色 */
  color: pink !important;
}

.introduce {
  height: 60px;
}
.introduce img {
  width: 20px;
  position: relative;
  top: 15px;
  left: 20px;
}
.introduce span {
  color: rgb(255, 255, 255);
  position: relative;
  left: 30px;
  top: 11px;
}
/*解决收缩菜单文字不消失问题*/
.el-menu--collapse span {
  visibility: hidden;
}
</style>